<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useGetAuditList } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { en } from 'element-plus/es/locale'
import { cloneDeep } from 'lodash-es'

import { MEMBER_STATUS_DICT } from './constant'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: '/operations-pages/member/auditCW',
})

const { push } = useRouter()

const STATUS_DICT = {
    0: '待审核',
    1: '已审核',
}

const STATUS_LIST: any[] = Object.entries(STATUS_DICT).map(([key, value]) => ({
    label: value,
    value: Number(key),
}))

const initialState = {
    enterpriseName: '',
}

const state = ref(cloneDeep(initialState))

const columns = [
    {
        label: '公司名称',
        prop: 'enterpriseName',
        renderField: (_, onChange) => {
            return h(ElInput, {
                onChange,
                onKeydown: (event: any) => {
                    if (event.key === 'Enter') {
                        event.preventDefault()
                    }
                },
            })
        },
        valueType: 'Input',
    },
]

const activeName = ref(STATUS_LIST[0].value)

const gridOptions = computed<VxeGridProps>(() => {
    return {
        columns: [
            { fixed: 'left', title: '序号', type: 'seq', width: 50 },
            { field: 'enterpriseName', minWidth: 120, showOverflow: true, title: '企业名称' },
            { field: 'memberLevelName', minWidth: 150, title: '会员等级' },
            { field: 'payAmount', minWidth: 150, title: '缴费金额(元)' },
            { field: 'payDate', minWidth: 150, title: '缴费日期' },
            { field: 'paymentReceiptList', minWidth: 120, slots: { default: 'paymentReceiptList' }, title: '支付凭证' },
            { field: 'createTime', minWidth: 150, title: '申请时间' },
            {
                field: 'status',
                formatter: (row: any) => {
                    return MEMBER_STATUS_DICT[row.cellValue]
                },
                minWidth: 150,
                title: '审批状态',
                visible: STATUS_DICT[unref(activeName)] === '已审核',
            },
            { field: 'attachment', minWidth: 120, slots: { default: 'attachment' }, title: '附件', visible: STATUS_DICT[unref(activeName)] === '已审核' },
            { field: 'auditTime', minWidth: 150, title: '审核时间', visible: STATUS_DICT[unref(activeName)] === '已审核' },
            { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 100 },
        ],
        height: 700,
        showOverflow: false,
        toolbarConfig: {
            slots: {
                buttons: 'toolbar_buttons',
            },
        },
    }
})

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}

const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => {
    return {
        auditStatus: unref(activeName),
        enterpriseName: unref(state).enterpriseName,
        pageNum: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
    }
})

const { data, isLoading } = useGetAuditList(params)

const loading = computed(() => isLoading.value)

const tableData = ref<any[]>([])

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function search(val: any) {
    state.value = cloneDeep(val)
    tablePage.value.currentPage = 1
}

function reset() {
    state.value = cloneDeep(initialState)
    tablePage.value.currentPage = 1
}

function goShow(row: any) {
    push(`/operations-pages/member/auditCW/${row.id}`)
}

function showFile(file: any) {
    window.open(file)
}

watchEffect(() => {
    if (data.value) {
        tableData.value = cloneDeep(data.value.records || [])
        tablePage.value.total = data.value.total ?? 0
    }
})
</script>

<template>
    <el-card shadow="never"
             mb-20
    >
        <div mb-20
             text-16
             font-700
        >
            会员审核管理
        </div>

        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="search"
                    @reset="reset"
        />
    </el-card>

    <el-card shadow="never">
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in STATUS_LIST"
                         :key="item.label"
                         :label="item.label"
                         :name="item.value"
            />
        </el-tabs>

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :seq-config="{ startIndex: (tablePage.currentPage - 1) * tablePage.pageSize }"
                     :loading="loading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #paymentReceiptList="{ row }">
                <div v-if="row.paymentReceiptList?.length"
                     p-10
                     text-red
                     flex
                     flex-col
                     gap-10
                     w-full
                     justify-center
                     items-center
                >
                    <div v-for="item, index in row.paymentReceiptList"
                         :key="index"
                         truncate
                         w-full
                         cursor-pointer
                         :title="item.name"
                         @click="showFile(item.url)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </template>

            <template #attachment="{ row }">
                <div v-if="row.attachment?.length"
                     p-10
                     text-red
                     flex
                     flex-col
                     gap-10
                     w-full
                     justify-center
                     items-center
                >
                    <div v-for="item, index in row.attachment"
                         :key="index"
                         truncate
                         w-full
                         cursor-pointer
                         :title="item.name"
                         @click="showFile(item.url)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </template>

            <template #operate="{ row }">
                <el-button text
                           type="primary"
                           @click="goShow(row)"
                >
                    {{ STATUS_DICT[activeName] === '已审核' ? '查看' : '审核' }}
                </el-button>
            </template>
        </SearchTable>
    </el-card>
</template>
